import { useEffect, useRef, useState } from 'react';
import {
  View,
  Text,
  Image,
  ScrollView
} from '@tarojs/components';
import {
	getStorageSync,
} from '@utils/util';
import {
  requestBaseUrl
} from '@config';
import Taro from '@tarojs/taro';
import { useDispatch } from 'react-redux';
import {
  updateShowTemplates
} from '@stores/actions/user';
import demo from '@images/demo.png';
import './index.css';

const ModalTemplate = (props) => {
  const dispatch = useDispatch();
  const [canSubmit, setCanSubmit] = useState(true);

  const [errorsList] = useState([
    {
      id: 0,
      icon: 'https://jala-test-images.sndaurl.cn/images/example_side.png',
      name: '侧面'
    },
    {
      id: 1,
      icon: 'https://jala-test-images.sndaurl.cn/images/example_occlusion.png',
      name: '有遮挡'
    },
    {
      id: 2,
      icon: 'https://jala-test-images.sndaurl.cn/images/example_dark.png',
      name: '光线暗'
    },
    {
      id: 3,
      icon: 'https://jala-test-images.sndaurl.cn/images/example_vague.png',
      name: '模糊'
    }
  ]);

  const onClose = () => {
    props.onClick && props.onClick();
  }

  const takePhoto = () => {
    Taro.navigateTo({
      url: '/pages/photo/index'
    })
  }

  const onChooseImgs = () => {
    if (canSubmit) {
      setCanSubmit(false);
      Taro.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album'],
        success (res) {
          console.log('err11', res);
          const tempFilePaths = res.tempFilePaths;
          Taro.showLoading({
            title: '加载中',
          });
          Taro.uploadFile({
            url: `${requestBaseUrl}/v1/user/archives/upload`,
            filePath: tempFilePaths[0],
            name: 'file',
            formData: {
              file: tempFilePaths[0],
            },
            header: {
              'token': getStorageSync('token'),
              'user_type': 'douyin'
            },
            success: function (response) {
              let data = JSON.parse(response.data);
              Taro.hideLoading({});
              setCanSubmit(true);
              if (data.error) {
                Taro.navigateTo({
                  url: `/pages/photo/index?url=${tempFilePaths}&isError=1&error=${data.error}`
                });
              } else {
                Taro.navigateTo({
                  url: `/pages/photo/index?url=${data.url}&isError=0`
                });
              }
            },
            fail: function (res) {
              dispatch(updateShowTemplates(true));
              setCanSubmit(true);
            }
          });
        },
        fail: function (err) {
          dispatch(updateShowTemplates(true));
          setCanSubmit(true);
        }
      })
    }
  }

  return (
    <View
      className='maskView'
      onClick={()=>{props.onClose && props.onClose()}}
    >
      <View className='modal_template'>
        <View className='modal_template_title'>
          添加一张正面照片
          <Image
            src='https://jala-test-images.sndaurl.cn/images/closeIcon.png'
            className='modal_template_title_icon'
            onClick={()=>{onClose()}}
            mode='aspectFill'
          />
        </View>
        <View className='modal_template_main'>
          <Image
            src={demo}
            className='modal_template_main_demo'
            mode='aspectFill'
          />
          <View className='modal_template_main_tip'>
            <Image
              src='https://jala-test-images.sndaurl.cn/images/checkmark.png'
              className='modal_template_main_tip_icon'
              mode='aspectFill'
            />
            五官清晰的正面
          </View>
          <View className='modal_template_main_errors'>
            {
              errorsList.map(item=>
                <View className='modal_template_main_errors_item' key={item.id}>
                  <Image
                    src={item.icon}
                    className='modal_template_main_errors_item_demo'
                    mode='aspectFill'
                  />
                  <View className='modal_template_main_errors_item_tip'>
                    <Image
                      src='https://jala-test-images.sndaurl.cn/images/closeBg.png'
                      className='modal_template_main_errors_item_tip_icon'
                      mode='aspectFill'
                    />
                    {item.name}
                  </View>
                </View>
              )
            }
          </View>
        </View>
        <View className='modal_template_main_line'></View>
        <View className='modal_template_main_tips'>
          <View className='modal_template_main_tips_title'>建议上传照片满足上方提示，不然效果可能会打折哦</View>
          <View className='modal_template_main_tips_actions'>
            <View className='modal_template_main_tips_actions_item' onClick={()=>{takePhoto()}}>
              <Image
                src='https://jala-test-images.sndaurl.cn/images/photo.png'
                className='modal_template_main_tips_actions_item_icon'
                mode='aspectFill'
              />
              <Text className='modal_template_main_tips_actions_item_text'>拍照上传</Text>
            </View>
            <View className='modal_template_main_tips_actions_item' onClick={()=>{onChooseImgs()}}>
              <Image
                src='https://jala-test-images.sndaurl.cn/images/album.png'
                className='modal_template_main_tips_actions_item_icon'
                mode='aspectFill'
              />
              <Text className='modal_template_main_tips_actions_item_text'>从相册选择</Text>
            </View>
          </View>
        </View>
      </View>
    </View>
  )
}

export default ModalTemplate;
